<template>
	<div id="poStudentStatus" class="poStudentStatus">
		<div id="customerSubtitle" class="customerSubtitle">
			<tab>
				<tab-item selected @on-item-click="getPoStudentStatusToday">今日试听</tab-item>
				<tab-item @on-item-click="getPoStudentStatusFuture">即将试听</tab-item>
				<tab-item @on-item-click="getPoStudentStatusComplete">已试听</tab-item>
			</tab>
		</div>

		<div v-if="page == 'getPoStudentStatusToday'">
			<PoStudentList curURL="ai/pages/getPoStudentStatusToday" jumpToObjectDetails="customerDetails"></PoStudentList>
		</div>
		<div v-else-if="page == 'getPoStudentStatusFuture'">
			<PoStudentList curURL="ai/pages/getPoStudentStatusFuture" jumpToObjectDetails="customerDetails"></PoStudentList>
		</div>
		<div v-else-if="page == 'getPoStudentStatusComplete'">
			<PoStudentList curURL="ai/pages/getPoStudentStatusComplete" jumpToObjectDetails="customerDetails"></PoStudentList>
		</div>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import PoStudentList from '../../../../components/mobile/scroller/scrollerPoStudentList'
	import {Tab, TabItem} from 'vux'
	export default {
		name: "po-student-status",
		components: {
			Tab,
			TabItem,
			PoStudentList
		},
		data() {
			return {
				page: 'getPoStudentStatusToday'
			}
		},
		created: function () {
			bus.$emit("userDefinedEvent", 2)
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '校区试听')
		},
		methods: {
			getPoStudentStatusToday() {
				this.page = 'getPoStudentStatusToday'
			},
			getPoStudentStatusFuture() {
				this.page = 'getPoStudentStatusFuture'
			},
			getPoStudentStatusComplete() {
				this.page = 'getPoStudentStatusComplete'
			}
		}
	}
</script>

<style scoped>
	.poStudentStatus{
		margin-top: 46px;
		margin-bottom: 100px;
	}

	.customerSubtitle {
		margin-top: 46px;
		position: relative;
		z-index: 99;
	}
</style>